<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Vue</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" class="w-80 mx-auto">
      <h1 v-cloak class="mt-10 text-green-500 text-4xl text-center">{{msg}}</h1>
      <style-bandings></style-bandings>
      <style-bandings-demo></style-bandings-demo>
      <counter></counter>
      <condition></condition>
      <condition-demo></condition-demo>
      <list-rendering></list-rendering>
    </div>

    <script>
      const { createApp, defineComponent } = Vue

      // Panel Component
      const Panel = defineComponent({
        props: {
          title: {
            type: String,
            required: false,
            default: '',
          },
        },
        template: `
          <div class="flex flex-col my-4 px-8 pb-8 pt-4  bg-gray-100  rounded shadow-inner">
            <h1 class="mb-2  text-xl text-green-500 border-b-2 border-green-200">{{title}}</h1>
            <slot></slot>
          </div>
        `,
      })
      // Button Component
      const TButton = defineComponent({
        props: {
          size: {
            type: String,
            required: false,
            default: 'med',
          },
        },
        data: () => ({
          sizeClasslist: '',
        }),
        methods: {
          handleSize() {
            switch (this.size) {
              case 'sm':
                this.sizeClasslist = 'px-2 py-1 text-sm'
                break
              case 'lg':
                this.sizeClasslist = 'px-8 py-4 text-2xl'
                break
              default:
                this.sizeClasslist = 'px-4 py-2 text-base'
                break
            }
          },
        },
        created() {
          this.handleSize()
        },
        template: `
          <button
            class="inline-flex items-center mt-2   border border-green-400 leading-6 font-medium rounded-md text-green-800 bg-white hover:text-green-500 focus:border-green-300 focus:ring focus:ring-green-200 focus:outline-none active:bg-green-700  transition ease-in-out duration-150"
            :class="sizeClasslist"
          ><slot></slot></button>
        `,
      })

      // 样式绑定
      const StyleBandings = defineComponent({
        components: {
          panel: Panel,
        },
        data: () => ({
          style: 'color: blue',
          singleClass: 'text-red-500', //  .text-red-500 in tailwind css
          multipleClass: ['px-2 py-1 bg-green-500 text-white text-sm rounded'],
          isActive: true,
        }),
        template: `
          <panel title="样式绑定">
            <p :style="style">绑定 style</p>
            <p :class="singleClass">绑定单个 class</p>
            <p :class="multipleClass">绑定多个 class</p>
            <p :class="{'text-yellow-500': isActive}">class: Boolean</p>
          </panel>
        `,
      })

      // 样式绑定练习
      const StyleBandingsDemo = defineComponent({
        components: {
          panel: Panel,
          't-button': TButton,
        },
        data: () => ({
          currentClasslist: '',
          success: 'bg-green-200 border-2 border-green-500',
          warn: 'bg-purple-200  border-2 border-purple-500',
        }),
        methods: {
          addClass() {
            this.currentClasslist = this.success
          },
          delClass() {
            this.currentClasslist = ''
          },
          toggleClass() {
            this.currentClasslist =
              this.currentClasslist === this.success ? this.warn : this.success
          },
        },
        template: `
          <panel title="样式绑定练习">
            <div class="my-4 w-full h-20 bg-white shadow-md rounded" :class="currentClasslist" ></div>
            <div class="flex justify-between w-full">
              <t-button size="sm"  @click="addClass">应用class</t-button>
              <t-button size="sm"  @click="toggleClass">切换class</t-button>
              <t-button size="sm"  @click="delClass">删除class</t-button>
            </div>
          </panel>
        `,
      })

      // once v-pre
      const Counter = defineComponent({
        components: {
          panel: Panel,
          't-button': TButton,
        },
        data: () => ({
          count: 0,
        }),
        template: `
          <panel title="v-pre & once">
            <div class="text-red-500 text-xl">{{count}}</div>
            <div v-pre>v-pre 阻止渲染{{count}}</div>
            <t-button @click="count += 1">加 1</t-button>
            <t-button @click.once="count += 1">加 1(@click.once)</t-button>
          </panel>
        `,
      })

      // 条件渲染
      const Condition = defineComponent({
        components: {
          panel: Panel,
        },
        data: () => ({
          htmlContent: `<p v-if="true">v-if="true"</p>
<p v-if="false">v-if="false"</p>
<p v-show="true">v-show="true"</p>
<p v-show="false">v-show="false"</p>`,
        }),
        template: `
          <panel title="条件渲染">
            <div
               v-text="htmlContent"
               class="
               my-2
               text-gray-500
               text-sm
               whitespace-pre"
            >
            </div>
            <p v-if="true">v-if="true"</p>
            <p v-if="false">v-if="false"</p>
            <p v-show="true">v-show="true"</p>
            <p v-show="false">v-show="false"</p>
          </panel>
        `,
      })

      // 条件渲染练习
      const ConditionDemo = defineComponent({
        components: {
          panel: Panel,
          't-button': TButton,
        },
        data: () => ({
          showMsg: false,
        }),
        template: `
          <panel title="条件渲染练习">
            <div class="flex  items-center my-4  h-4">
              <p 
                class="px-2 py-1 w-full  bg-green-200 border-2 border-green-500 text-gray-50 text-sm rounded" 
                v-show="showMsg"
              >这是一条信息</p>
            </div>
            <div class="flex justify-around w-full">
              <t-button size="sm"  @click="showMsg = true">显示信息</t-button>
              <t-button size="sm"  @click="showMsg = false">隐藏信息</t-button>
              <t-button size="sm"  @click="showMsg = !showMsg">显示隐藏</t-button>
            </div>
          </panel>
        `,
      })

      // 列表渲染
      const ListRendering = defineComponent({
        components: {
          panel: Panel,
        },
        data: () => ({
          foods: [
            {
              icon: '🥪',
              title: '三明治',
            },
            {
              icon: '🍳',
              title: '煎蛋',
            },
            {
              icon: '🧀',
              title: '芝士',
            },
            {
              icon: '🍋',
              title: '柠檬',
            },
          ],
        }),
        template: `
          <panel title="列表渲染">
            <ul>
              <li v-for="food in foods" :key="food.title">{{food.icon}} - {{food.title}}</li>
            </ul>
          </panel>
        `,
      })

      // 根组件
      const App = defineComponent({
        components: {
          'style-bandings': StyleBandings,
          'style-bandings-demo': StyleBandingsDemo,
          counter: Counter,
          condition: Condition,
          'condition-demo': ConditionDemo,
          'list-rendering': ListRendering,
        },
        data: () => ({
          msg: '🍰Vue Day 2 !',
        }),
        mounted() {
          console.log('App mounted!')
        },
      })

      createApp(App).mount('#app')
    </script>
  </body>
</html>
